<template>
<div class="stu">
  <input v-model="key">
  <button @click="toAdd()">添加</button>
  <table border="1">
    <tr>
      <td>id</td>
      <td>文件名称</td>
      <td>姓名</td>
      <td>入职意向</td>
      <td>生日</td>
      <td>学历</td>
      <td>性别</td>
      <td>邮箱</td>
      <td>电话</td>
      <td>操作</td>
    </tr>
    <tr v-bind:key="stu.id" v-for="stu in qlist">
      <td>{{stu.id}}</td>
      <td>{{stu.resumeName}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.job.join(',')}}</td>
      <td>{{stu.birthday}}</td>
      <td>{{stu.education}}</td>
      <td>
        <span v-if="stu.sex=='M'">男</span>
        <span v-if="stu.sex=='W'">女</span>
      </td>
      <td>{{stu.email}}</td>
      <td>{{stu.tel}}</td>
      <td>
        <button @click="del(stu.id)">删除</button>
        <button @click="toUpd(stu.id)">修改</button>
      </td>
    </tr>
  </table>
  <div v-show="showUpdate">
    id:{{stu.id}}<br>
    文件名称:<input type="text" v-model="stu.resumeName"><br>
    姓名:<input type="text" v-model="stu.name"><br>
    入职意向:<input type="checkbox" v-model="stu.job" value="经理">经理
            <input type="checkbox" v-model="stu.job" value="会计">会计
            <input type="checkbox" v-model="stu.job" value="销售">销售
            <input type="checkbox" v-model="stu.job" value="财务">财务
            <input type="checkbox" v-model="stu.job" value="工程师">工程师
            <input type="checkbox" v-model="stu.job" value="程序员">程序员<br>
    生日:<input type="date" v-model="stu.birthday"><br>
    学历:<select v-model="stu.education">
          <option value="小学">小学</option>
          <option value="中学">中学</option>
          <option value="大学">大学</option>
          <option value="博士">博士</option>
          <option value="硕士">硕士</option>
        </select>
    性别：<input type="radio" v-model="stu.sex" value="M">男
          <input type="radio" v-model="stu.sex" value="W">女<br>
    邮箱:<input type="text" v-model="stu.email"><br>
    电话:<input type="text" v-model="stu.tel"><br>
    <button @click="saveUpdate">保存</button>
    <button @click="showUpdate = false">取消</button>
  </div>
  <div v-show="showAdd">
    id:{{stu.id}}<br>
    文件名称:<input type="text" v-model="stu.resumeName"><br>
    姓名:<input type="text" v-model="stu.name"><br>
    入职意向:<input type="checkbox" v-model="stu.job" value="经理">经理
    <input type="checkbox" v-model="stu.job" value="会计">会计
    <input type="checkbox" v-model="stu.job" value="销售">销售
    <input type="checkbox" v-model="stu.job" value="财务">财务
    <input type="checkbox" v-model="stu.job" value="工程师">工程师
    <input type="checkbox" v-model="stu.job" value="程序员">程序员<br>
    生日:<input type="date" v-model="stu.birthday"><br>
    学历:<select v-model="stu.education">
    <option value="小学">小学</option>
    <option value="中学">中学</option>
    <option value="大学">大学</option>
    <option value="博士">博士</option>
    <option value="硕士">硕士</option>
  </select>
    性别：<input type="radio" v-model="stu.sex" value="M">男
    <input type="radio" v-model="stu.sex" value="W">女<br>
    邮箱:<input type="text" v-model="stu.email"><br>
    电话:<input type="text" v-model="stu.tel"><br>
    <button @click="AddStu">保存</button>
    <button @click="showAdd = false">取消</button>
  </div>
</div>
</template>

<script>
export default {
  name: 'studentView',
  data: function () {
    return {
      key: '',
      showUpdate: false,
      showAdd: false,
      stu: {
        id: 0,
        resumeName: '',
        name: '',
        job: [],
        birthday: '',
        education: '',
        sex: '',
        email: '',
        tel: ''
      },
      list: [
        {
          id: 1,
          resumeName: '入职申请',
          name: '张三',
          job: ['经理', '会计'],
          birthday: '2002-03-09',
          education: '大学',
          sex: 'M',
          email: '2734318968@qq.com',
          tel: '13970369741'
        },
        {
          id: 2,
          resumeName: '入职申请',
          name: '李四',
          job: ['程序员', '会计'],
          birthday: '2002-03-09',
          education: '硕士',
          sex: 'W',
          email: '2734318968@qq.com',
          tel: '13970369741'
        }
      ]
    }
  },
  computed: {
    qlist () {
      return this.list.filter((x) => { return x.name.includes(this.key) })
    }
  },
  methods: {
    del (id) {
      const pos = this.list.findIndex((x) => { return x.id === id })
      this.list.splice(pos, 1)
    },
    toUpd (id) {
      this.showUpdate = true
      alert(id)
      this.stu = JSON.parse(JSON.stringify(this.list.find((x) => { return x.id === id })))
    },
    saveUpdate: function () {
      const update = this.list.find((x) => { return x.id === this.stu.id })
      update.resumeName = this.stu.resumeName
      update.name = this.stu.name
      update.job = this.stu.job
      update.birthday = this.stu.birthday
      update.education = this.stu.education
      update.sex = this.stu.sex
      update.email = this.stu.email
      update.tel = this.stu.tel
      this.showUpdate = false
    },
    toAdd () {
      this.showAdd = true
      const stuId = this.list[this.list.length - 1].id
      this.stu = {
        id: stuId + 1,
        resumeName: '',
        name: '',
        job: [],
        birthday: '',
        education: '',
        sex: '',
        email: '',
        tel: ''
      }
    },
    AddStu () {
      this.list.push(this.stu)
      this.showAdd = false
    }
  }
}
</script>

<style scoped>

</style>
